<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>板块成分股数据统计</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/antd@5.0.0/dist/reset.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header h1 {
            margin: 0;
            color: #1a1a1a;
            font-size: 24px;
        }
        .button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        .button-default {
            background-color: #f0f0f0;
            color: #333;
        }
        .button-default:hover {
            background-color: #e6f7ff;
        }
        .content {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .stats-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .stat-card {
            background-color: #fafafa;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            border: 1px solid #f0f0f0;
        }
        .stat-card .number {
            font-size: 32px;
            font-weight: bold;
            color: #1890ff;
            margin-bottom: 8px;
        }
        .stat-card .label {
            font-size: 14px;
            color: #666;
        }
        .chart-section {
            margin-bottom: 30px;
        }
        .chart-section h2 {
            font-size: 18px;
            margin-bottom: 20px;
            color: #333;
        }
        .chart-container {
            height: 400px;
            margin-bottom: 20px;
        }
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 60px;
            color: #999;
        }
        .grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        @media (max-width: 768px) {
            .grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>板块成分股数据统计</h1>
            <button class="button button-default" id="backBtn">返回列表</button>
        </div>
        
        <div class="content">
            <div class="stats-cards">
                <div class="stat-card">
                    <div class="number" id="totalCount">--</div>
                    <div class="label">成分股总数</div>
                </div>
                <div class="stat-card">
                    <div class="number" id="szCount">--</div>
                    <div class="label">深市成分股</div>
                </div>
                <div class="stat-card">
                    <div class="number" id="shCount">--</div>
                    <div class="label">沪市成分股</div>
                </div>
                <div class="stat-card">
                    <div class="number" id="blockCount">--</div>
                    <div class="label">涉及板块数</div>
                </div>
            </div>
        </div>
        
        <div class="grid">
            <div class="content">
                <div class="chart-section">
                    <h2>各板块成分股数量分布</h2>
                    <div class="chart-container" id="blockChart"></div>
                </div>
            </div>
            
            <div class="content">
                <div class="chart-section">
                    <h2>市场分布情况</h2>
                    <div class="chart-container" id="marketChart"></div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        let blockChart, marketChart;
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 绑定返回按钮事件
            document.getElementById('backBtn').addEventListener('click', function() {
                window.location.href = '/blockposition/list';
            });
            
            // 初始化图表
            initCharts();
            
            // 加载统计数据
            loadStatisticsData();
        });
        
        // 初始化图表
        function initCharts() {
            // 板块分布图表
            blockChart = echarts.init(document.getElementById('blockChart'));
            blockChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: {
                        interval: 0,
                        rotate: 45
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '成分股数量'
                },
                series: [{
                    data: [],
                    type: 'bar',
                    itemStyle: {
                        color: '#1890ff'
                    },
                    label: {
                        show: true,
                        position: 'top'
                    }
                }],
                title: {
                    text: '',
                    left: 'center'
                }
            });
            
            // 市场分布图表
            marketChart = echarts.init(document.getElementById('marketChart'));
            marketChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [{
                    name: '市场分布',
                    type: 'pie',
                    radius: '60%',
                    data: [],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            });
            
            // 响应式处理
            window.addEventListener('resize', function() {
                blockChart.resize();
                marketChart.resize();
            });
        }
        
        // 加载统计数据
        function loadStatisticsData() {
            fetch('/blockposition/statisticsData')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应错误');
                    }
                    return response.json();
                })
                .then(data => {
                    // 更新统计卡片
                    updateStatCards(data);
                    
                    // 更新板块分布图表
                    updateBlockChart(data.blockCountMap);
                    
                    // 更新市场分布图表
                    updateMarketChart(data.marketCountMap);
                })
                .catch(error => {
                    console.error('加载统计数据失败:', error);
                    showErrorMessage('加载统计数据失败，请刷新页面重试');
                });
        }
        
        // 更新统计卡片
        function updateStatCards(data) {
            document.getElementById('totalCount').textContent = data.totalCount || 0;
            
            // 深市和沪市数量
            const szCount = data.marketCountMap && data.marketCountMap[1] ? data.marketCountMap[1] : 0;
            const shCount = data.marketCountMap && data.marketCountMap[0] ? data.marketCountMap[0] : 0;
            
            document.getElementById('szCount').textContent = szCount;
            document.getElementById('shCount').textContent = shCount;
            
            // 板块数量
            const blockCount = data.blockCountMap ? Object.keys(data.blockCountMap).length : 0;
            document.getElementById('blockCount').textContent = blockCount;
        }
        
        // 更新板块分布图表
        function updateBlockChart(blockCountMap) {
            if (!blockCountMap || Object.keys(blockCountMap).length === 0) {
                blockChart.setOption({
                    title: {
                        text: '暂无数据',
                        left: 'center'
                    },
                    xAxis: {
                        data: []
                    },
                    series: [{
                        data: []
                    }]
                });
                return;
            }
            
            // 转换数据格式并排序（取前10个）
            const sortedBlocks = Object.entries(blockCountMap)
                .sort((a, b) => b[1] - a[1])
                .slice(0, 10);
            
            const blockCodes = sortedBlocks.map(item => item[0]);
            const counts = sortedBlocks.map(item => item[1]);
            
            blockChart.setOption({
                title: {
                    text: '',
                    left: 'center'
                },
                xAxis: {
                    data: blockCodes
                },
                series: [{
                    data: counts
                }]
            });
        }
        
        // 更新市场分布图表
        function updateMarketChart(marketCountMap) {
            if (!marketCountMap || Object.keys(marketCountMap).length === 0) {
                marketChart.setOption({
                    series: [{
                        data: []
                    }]
                });
                return;
            }
            
            const marketData = [];
            
            if (marketCountMap[1]) {
                marketData.push({
                    value: marketCountMap[1],
                    name: '深市'
                });
            }
            
            if (marketCountMap[0]) {
                marketData.push({
                    value: marketCountMap[0],
                    name: '沪市'
                });
            }
            
            marketChart.setOption({
                series: [{
                    data: marketData,
                    itemStyle: {
                        color: function(params) {
                            const colors = ['#1890ff', '#ff4d4f'];
                            return colors[params.dataIndex];
                        }
                    }
                }]
            });
        }
        
        // 显示错误消息
        function showErrorMessage(message) {
            alert(message);
        }
    </script>
</body>
</html>